<!DOCTYPE html>
<html>
  <head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9"/>
	<title>jTopo Demo</title>
	<link rel="stylesheet" type="text/css" href="../css/base.css">
	<link href="../css/jquery.snippet.min.css" rel="stylesheet">
	
	<script src="../js/jquery.js"></script>
	<script src="../js/site.js"></script>
	<script src="../js/demo.js"></script>
	
	<script type="text/javascript" src="js/snippet/jquery.snippet.min.js"></script>
	
	<script type="text/javascript" src="js/jtopo-min.js"></script>
	<script type="text/javascript" src="js/toolbar.js"></script>
	
	<script id='code'>
		$(document).ready(function(){					
			var canvas = document.getElementById('canvas');
			var stage = new JTopo.Stage(canvas);
			//显示工具栏
			showJTopoToobar(stage);

			var scene = new JTopo.Scene();
			scene.backgroundColor='0,0,0';
			scene.alpha = 1;
			stage.add(scene);
			
			function myNode(){
				var node = new JTopo.CircleNode("Hello");							
				node.fillStyle='255,255,255';
				node.startAlpha = 1;
				node.endAlpha = 0;
				node.radius = 30;			
				node.setSize(node.radius * 2, node.radius * 2);						
				node.paint = function(g){
					var r = this.radius;
					
					var rg = g.createRadialGradient(0, 0, 1, 0, 0, r); 
					rg.addColorStop(0, 'rgba(255,255,255,'+this.startAlpha+')');				
					rg.addColorStop(1, 'rgba(255,255,255,'+this.endAlpha+')');     				
					g.fillStyle = rg;
					g.beginPath();
					g.arc(0, 0, r, 0, 2*Math.PI, true);
					g.fill();
					g.closePath();
				};
				scene.add(node);
				return node;
			}
			
			var node = myNode();
			node.setLocation(300,200);
			 
			JTopo.Animate.stepByStep(node, {radius: 50, x:node.x+200}, 1000+Math.random()*3000).start(); 
			
			var nodeTo = myNode();
			nodeTo.setLocation(380, 200);
			scene.add(nodeTo);
			JTopo.Animate.stepByStep(nodeTo, {radius: 10, x:nodeTo.x-200}, 1000+Math.random()*3000).start(); 
				
			var link = new JTopo.Link(node, nodeTo);
			link.lineWidth = 3;
			link.strokeColor = '255,255,255';
			scene.add(link);
			
			link.paint = function(g){
				g.beginPath();
				g.shadowBlur = 5;
				g.shadowColor = 'rgba(255,255,255,0.8)';
				g.shadowOffsetX = 0;
				g.shadowOffsetY = 3;				
				g.strokeStyle = 'rgba(' + this.strokeColor + ',' + this.alpha + ')';
				g.lineWidth = this.lineWidth;
				g.moveTo(this.nodeA.x + this.nodeA.width / 2, this.nodeA.y + this.nodeA.height / 2);
				g.lineTo(this.nodeZ.x + this.nodeZ.width / 2, this.nodeZ.y + this.nodeZ.height / 2);
				g.stroke();
				g.closePath();
			};			
		});
	</script>
  </head>

  <body>

	<center>
	<div class="wrap_div">
		<div class="head_nav">
			<h2 class="logo"><a href="index.html" title="jTopo">jTopo</a></h2>
		</div>		
		<div class="head_nav_second">			
			<ul class="menu" id="nav_menu">
			
			</ul>
		</div>
		<div class="content">
		  <div class="left">
			<ul id="menu">
			
			</ul>
		  </div>
		  <div class="right">
				<div id="content">					<canvas width="850" height="550" id="canvas"></canvas>	
									
				</div>
		  </div>
		  <div class="clear"></div>
		</div>
	</div>
	</center>
	<div class="footer">
		&nbsp;
	</div>
  <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1000418207'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "v1.cnzz.com/z_stat.php%3Fid%3D1000418207%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));</script>
</body>

</html>